<template>
  <CommonPage :title="pageTitle">
    <template #mid>
      <SearchForm>
        <template #extraButtons>
          <a-button type="primary" @click="showCreateModal">
            {{ addText }}
          </a-button>
        </template>
      </SearchForm>
    </template>
    <SlTable :columns="columns" row-key="id" :data-source="tableData" :pagination="pagination" :loading="tableLoading">
      <template #bodyCell="{ column, record }: BodyCellOptions<Partial<AcitivityDefItem>>">
        <div v-if="column.key === 'oper'">
          <!-- <a class="mr-2" @click="addSubMenu(record)"> 新增下级 </a> -->
          <div>
            <a @click="showUpdateModal(record)">编辑</a>
            <a class="ml-2 text-red-400" @click="handleDelete(record)">删除</a>
          </div>
          <div v-if="record.status !== AcitivityDefStatus.disabled">
            <a v-if="record.status === AcitivityDefStatus.waiting" @click="handleExamine(record)">审核</a>
            <span v-if="record.status === AcitivityDefStatus.waiting" class="inline-block w-2"></span>
            <a class="text-red-400" @click="handleCancel(record)">作废</a>
          </div>
        </div>
        <div v-else-if="column.dataIndex === 'status'">
          <span :style="{ color: handleStatusCell(record.status).color }">
            {{ handleStatusCell(record.status).text }}
          </span>
        </div>
        <div v-else-if="column.dataIndex === 'couponsUrl'">
          <a-image :fallback="DEFAULT_IMG_BASE64_STR" :src="record.couponsUrl" :width="100" />
        </div>
        <div v-else-if="column.dataIndex === 'couponsLogo'">
          <a-image :fallback="DEFAULT_IMG_BASE64_STR" :src="record.couponsLogo" :width="48" />
        </div>
        <WidthFitCell
          v-else
          :title="column.title"
          :value="record[column.dataIndex as string]"
          :record="record"
          :custom-render="column.customRender"
        />
      </template>
    </SlTable>
    <CURDDialog
      ref="curdDialogIns"
      id-key="id"
      :columns="columns"
      :create-title="addText"
      :update-title="editText"
      :delete-message="deleteText"
      :show-options="showOptions"
      :model="model"
      :model-form-setting="modelFormSetting"
      :model-rules="modelRules"
      :table-data="tableData"
      :curd="curd"
      :reload-table="reloadTable"
      :get-detail="getDetail"
      @before-ok="beforeOk"
      @open="open"
      @before-update-model="beforeUpdateModel"
    />
  </CommonPage>
</template>
<script lang="ts" setup>
import { ref, shallowRef } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { useCURD } from "/@/hooks/useCURD";
import { message, type TableColumnProps } from "ant-design-vue";
import { PatternKey } from "/@/utils/verify";
import { loopItem } from "/@/utils/treeData";
import type { BodyCellOptions } from "/@/types/antd";
import { Api, delActivityCommon, nullifyActivityCommon, reviewActivityCommon } from "/@/api/main/marketing";
import ReceiptModal from "./ReceiptModal.vue";
import dayjs from "dayjs";
import InfoModal from "/@/components/InfoModal";
import { getLabelByValueFromEnum } from "/@/utils/common";
import {
  ActivityDefType,
  AcitivityDefItem,
  UseActivityHook,
  AcitivityDefStatus,
  AcitivityDefStatusDetail,
} from "/@/api/main/marketing/models";
import useASchedule from "./useASchedule";
import useADetail from "./useADetail";
import useACoupon from "./useACoupon";
import { CURDAction, CURDModalEvent, ShowCURDModalOptions } from "/@/components/CURDDialog/models";
import { DEFAULT_IMG_BASE64_STR } from "/@/utils/file";
const props = defineProps<{
  activityDefType: ActivityDefType;
}>();

const { t } = useI18n();

let targetHook: UseActivityHook;
if (props.activityDefType === ActivityDefType.activitySchedule) {
  targetHook = useASchedule;
} else if (props.activityDefType === ActivityDefType.activityCoupon) {
  targetHook = useACoupon;
} else {
  targetHook = useADetail;
}
const {
  addText,
  pageTitle,
  editText,
  deleteText,
  innerColumns,
  model,
  modelFormSetting,
  innerBeforeOk,
  innerOpen,
  curdDialogIns,
  getDetail,
  beforeUpdateModel,
  modelRules,
} = targetHook();

const columns = ref<TableColumnProps<Partial<AcitivityDefItem>>[]>(innerColumns);

function handleStatusCell(status?: AcitivityDefStatus) {
  const target = AcitivityDefStatusDetail[status as AcitivityDefStatus];
  return target || { text: "--" };
}
const { pagination, tableData, tableLoading, curd, reloadTable } = useCURD<AcitivityDefItem>({
  getPageUrl: Api[props.activityDefType + "Page"],
  cudUrl: Api[props.activityDefType],
});

const showOptions = ref<ShowCURDModalOptions>();
// const curId = ref();
// const wrVisible = ref(false);
// const wrTitle = ref("");
function showCreateModal() {
  showOptions.value = { action: CURDAction.CREATE };
  // curId.value = void 0;
  // wrTitle.value = addText;
  // wrVisible.value = true;
}
function showUpdateModal(record) {
  showOptions.value = { action: CURDAction.UPDATE, record };
  // curId.value = record.id;
  // wrTitle.value = editText;
  // wrVisible.value = true;
}
function handleDelete(record) {
  // showOptions.value = { action: CURDAction.DELETE, record };
  InfoModal.warningConfirm({
    title: "提示",
    content: deleteText,
    async onOk() {
      const re = await delActivityCommon(record.id, props.activityDefType);
      if (re === undefined) {
        message.success("操作成功");
        reloadTable();
      }
    },
  });
}
function handleExamine(record) {
  InfoModal.warningConfirm({
    title: "提示",
    content: "确认审核通过吗？",
    async onOk() {
      const re = await reviewActivityCommon(record.id, props.activityDefType);
      if (re === undefined) {
        message.success("操作成功");
        reloadTable();
      }
    },
  });
}
function handleCancel(record) {
  InfoModal.warningConfirm({
    title: "提示",
    content: "确认作废吗？",
    async onOk() {
      const re = await nullifyActivityCommon(record.id, props.activityDefType);
      if (re === undefined) {
        message.success("操作成功");
        reloadTable();
      }
    },
  });
}

function beforeOk(e: CURDModalEvent<Partial<AcitivityDefItem>>) {
  innerBeforeOk && innerBeforeOk(e);
}
function open(e: CURDModalEvent<Partial<AcitivityDefItem>>) {
  innerOpen && innerOpen(e);
}
</script>
